<template>
  <uni-popup ref="popupBindDialog" type="center" :mask-click="false">
    <view class="container flex-col">
      <view class="title" >温馨提示</view>
      <view class="label" v-if="haveVIP">此账号已购买VIP!请先绑定微信或手机号后再退出。</view>
      <view class="label" v-else>此账号为游客账号，退出后无法再次登录，若想保留此账号数据，请先绑定微信或手机号后再退出。</view>
      <view class="flex-col btns align-center">
        <image class="btn2" @click="bind('phone')"
               src="https://down.qwdata.vip/app_icon/1702969914494"></image>
        <image class="btn2" @click="bind('wx')"
               src="https://down.qwdata.vip/app_icon/1702969919117"></image>
        <image class="btn2" @click="close"
               v-if="!haveVIP"
               src="https://down.qwdata.vip/app_icon/1702969923688"></image>
      </view>
    </view>
    <view class="flex-row close-container justify-center">
      <image class="close" @click="close" src="https://down.qwdata.vip/app_icon/bind_merge_dialog_close.png"></image>
    </view>
  </uni-popup>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  name: "BindDialog",
  data() {
    return {
      type: null
    };
  },
  computed: {
    ...mapGetters(['mine', 'haveVIP'])
  },
  methods: {
    open(type) {
      this.type = type
      this.$refs.popupBindDialog.open()
      return new Promise((resolve, reject) => {
        this.agreeFn = resolve
        this.noAgreeFn = reject
      })
    },
    close() {
      this.$refs.popupBindDialog.close()
      this.agreeFn = null
      if (this.noAgreeFn) {
        this.noAgreeFn()
        this.noAgreeFn = null
      }
    },
    bind(type) {
      console.log(type)
      this.$refs.popupBindDialog.close()
      this.noAgreeFn = null
      if (this.agreeFn) {
        this.agreeFn()
        this.agreeFn = null
      }
    },
  }
}
</script>

<style lang="scss">
.close-container {
  position: absolute;
  margin-top: 106upx;
  width: 604upx;

  .close {
    width: 58upx;
    height: 60upx;
  }
}

.container {
  width: 604upx;
  position: relative;
  background-color: #fff;
  border-radius: 30rpx;
  padding-bottom: 60rpx;
  background-image: url("http://down.qwdata.vip/app_icon/1702973181443");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;

  .title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 50rpx;
  }

  .label {
    margin-top: 50rpx;
    font-size: 15px;
    margin-left: 45rpx;
    margin-right: 45rpx;
    color: #2A2C2D;
    letter-spacing: 0;
    line-height: 26px;
    margin-bottom: 30rpx;
  }

  .btns {
    width: 604upx;

    .btn2 {
      width: 514upx;
      height: 98upx;
      margin-top: 25rpx;
    }
  }
}
</style>
